<template>
  <div class="headBox">
    <el-row>
      <div class="suo">
        <el-col :span="20" >
          <el-input v-model="input" class="w-50 m-2"  placeholder="搜索求助信息"  size="large">
            <template #suffix>
              <el-button @click="getInput" type="warning" round>搜索</el-button>
            </template>
          </el-input>

        </el-col>
      </div>


      <el-col :span="14"></el-col>
      <el-col :span="3">
        <el-button round class="upbotton" @click="toApply">我要发布</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="main-top">
    <div v-for="item in currentPageData" :key="item.aid" class="top">
      <el-row>
        <el-col :span="7">
          <img
              :src="item.adetailimg"
              class="delimg"  @click="getPage(item.aid)"/>
        </el-col>
        <el-col :span="17" style="padding: 20px">
          <div>
            <h3>{{ item.atitle }}</h3>
            <p>{{ item.asubhead }}</p>
            <el-progress :percentage="parseInt((item.anowmoney/item.aneedmoney)*100)"  />

          </div>
          <div class="col">
            <p>捐款人数：{{ item.acount }} &nbsp;&nbsp;</p>
            <p>已筹款：{{ item.anowmoney }}&nbsp;&nbsp;</p>
            <p>目标金额：{{ item.aneedmoney }}&nbsp;&nbsp;</p>


            <div class="bton">
              <el-button type="warning" @click="setAid(item.aid)" round>我要捐款</el-button>
            </div>


          </div>
        </el-col>
      </el-row>
      <!--弹框-->
      <div class="dalog">
        <el-dialog v-model="dialog">
          <el-form
              label-position="right"
              label-width="100px"

              style="max-width: 460px"
          ><h3>{{ ddetail.atitle }}</h3>
            <div class="mon">
              <p class="jin">请选择金额</p>
              <div class="mon-v">
                <el-form :model="input_money" :rules="moneyRules" ref="dmoneyRef">

                  <el-radio-group v-model="input_money">
                    <el-radio label="10" size="large" border>10元</el-radio>
                    <el-radio label="20" size="large" border>20元</el-radio>
                    <el-radio label="50" size="large" border>50元</el-radio>
                    <el-radio label="100" size="large" border>100元</el-radio>
                  </el-radio-group>

                  <div class="input_left">
                    <br>
                    <el-col :span="10">

                      <el-input v-model="input_money" placeholder="请输入其他金额">
                      </el-input>
                    </el-col>
                  </div>
                  <div class="button">
                    <el-button type="warning" round @click="add()">我要捐款</el-button>
                  </div>
                </el-form>
              </div>
            </div>
          </el-form>
        </el-dialog>
      </div>

    </div>
  </div>
  <!--分页-->
  <div class="ye">
    <el-col>
      <!--  分页组件-->
      <el-pagination
          v-model="currentPage"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalData.length"
          @current-change="handleCurrentChange">
      </el-pagination>
    </el-col>

  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "AsstanceList",
  data() {
    return {
      asstance: [],

      input: '',
      //分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页显示的条数  //一共多少条数据
      dialog: false,
      input_money: '',
      aid: 1,
      ddetail: {},
    }
  },
  computed: {
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const {totalData, currentPage, pageSize} = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      totalData.map
      return totalData.slice(start, end);
    },
  },
  methods: {
    /*模糊搜索*/
    getInput() {
      doThis.doGet("/asstance/findall", {atitle: this.input}).then(res => {
        console.log(res)
        this.asstance = res.data
        this.totalPage = this.asstance.length


      })
    },
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    /*点击进入*/
    getPage(aid) {
      this.$router.push('/front/assindex/asstanceDetail/' + aid);
    },
    // 发布页面
    toApply() {
      this.$checkLogin()
      let user = JSON.parse(localStorage.getItem("user"))
      if (user !== null && user.isreal === 2) {
        this.$router.push('/front/assindex/AsstanceAdd/');
      } else {
        ElMessage.error('实名后才可以发布')
      }

    },
//打开捐款弹窗
    setAid(aid) {
      this.dialog = true
      this.aid = aid
    },
    /*分页*/
    /* getUserListCondition(page){
       this.currentPage=page //更新当前页码
       this.getInput()   // 获取指定页码的数据
     },*/
    getUserListCondition() {
      this.pageIndex = this.currentPage
      this.getInput()   // 获取指定页码的数据
    },

    /*添加金额*/
    add() {
      this.$checkLogin()
      doThis.doGet("/assisder/insert", {aomoney: this.input_money, aid: this.aid}).then(res => {
        if (res.code === '0') {
          window.open(res.data)
        } else {
          // alert("添加失败，请检查输入是否正确")
          ElMessage.error('添加失败，请检查输入是否正确')
        }
        setTimeout(() => {
          this.dialog = false
          this.input_money = ''
          this.getData()
        }, 5000)
      })
    },

    findid() {
      /*按id查询*/

      doThis.doGet("/asstance/findId", {aid: this.aid}).then(res => {
        console.log(res.data)
        this.ddetail = res.data

      });
    },
    getData() {
      doThis.doGet("/asstance/findall", null).then(res => {
        console.log(res)
        this.tableData = res.data
        this.totalData = res.data

      });
    }
  },
  mounted() {
    /*查询所有*/
    this.getData()
  }
}
</script>

<style scoped>
.main-top {
  margin: 0 auto;
  width: 1200px;
}

.top{
  margin-bottom: 30px;
  margin-left: 23px;
}
.col{
  margin: 10px 30px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.bton{
  position: absolute;
  left: 600px;
  top: 10px;
}
.suo{

  margin-bottom: 30px;
  margin-left: 30px;
  padding-top: 20px;

}

.sou {
  margin: 10px 30px;
}

.ye {
  margin: 0 auto;
}
.delimg{
  width: 350px;
  height: 220px;
}
.button{
  margin-top: 30px;
}
.jin{
  margin-bottom: 10px;
}

.upbotton {
  margin: 10px 0 5px auto;
}

.headBox {
  margin: 20px 0;
}
</style>